<template>
  <el-aside class="aside-page" width="150px">
    <!-- nav -->
    <ul class="aside-navs scroll" v-if="$route.name !== 'conversation'">
      <li
        class="aside-nav can-not-select"
        :class="{ 'nav-chose': currentNavs[$route.name] === nav.navPath }"
        v-for="(nav, index) in navs[$route.name]"
        :key="index"
        @click="setNav(nav)"
      >
        <i class="fa-lg" :class="nav.navIcon"></i>
        <span v-text="nav.navName"></span>
      </li>
    </ul>

    <!-- 会话页面的nav -->
    <div v-else class="aside-wechats">
      <!-- 微信总数 -->
      <div class="aside-wechats-title">
        <i class="fa fa-weixin fa-lg" aria-hidden="true"></i>
        <p class="can-not-select font-size-16">
          {{ wechatsLogin.length }}/{{ wechats.length }}
        </p>
      </div>

      <!-- 微信列表 -->
      <ul class="wechats-list scroll">
        <li
          class="wechat-item"
          :index="wechat.WeChatId"
          v-for="(wechat, index) in reorganizedWechats"
          :key="index"
          :class="[
            { 'wechat-chose': wechat.WeChatId === currentWeChatId },
            { 'item-disabled': !wechat.IsOnline || !wechat.IsLogined },
          ]"
          @click="choseWechat(wechat)"
          :title="wechat.WeChatNick"
        >
          <!-- 微信头像 -->
          <div class="avatar-messages">
            <img
              class="wechat-avatar"
              :src="
                wechat.Avatar ||
                require('assets/svg/conversation-image-error.svg')
              "
              alt="微信头像"
            />
            <!-- 未读消息 -->
            <span
              class="new-message-notice"
              v-if="newMessageNotice[wechat.WeChatId]"
              v-text="newMessageNotice[wechat.WeChatId]"
            ></span>
            <!-- 离线标志 -->
            <span
              v-if="!wechat.IsOnline"
              class="iconfont jubo-off-line"
              :class="{
                'item-disabled': !wechat.IsOnline || !wechat.IsLogined,
              }"
            ></span>
          </div>
          <!-- 微信昵称 -->
          <span
            class="wechat-nick ellipsis wechat-nick-hide"
            v-text="wechat.WeChatNick"
          ></span>
        </li>
      </ul>

      <!-- 选择微信登陆 -->
      <div class="aside-wechats-bottom">
        <el-tooltip effect="dark" content="选择微信登陆" placement="right">
          <el-button type="text" size="medium" @click="showDialog">
            <i
              class="fa fa-cogs fa-lg"
              style="color: white"
              aria-hidden="true"
            ></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <!-- 微信dialog -->
    <el-dialog
      title="请选择微信登陆"
      class="my-dialog"
      destroy-on-close
      :visible.sync="dialogFormVisible"
    >
      <el-form class="chose-wechat-login-form scroll">
        <div
          class="wechat-info"
          :class="[
            { login: wechat.IsOnline && wechat.IsLogined },
            {
              selected:
                wechat.IsOnline &&
                wechatsWantToLogin.indexOf(wechat.WeChatId) >= 0,
            },
          ]"
          v-for="(wechat, index) in wechats"
          :key="index"
          @click="choseWechatLogin(wechat)"
        >
          <img
            :class="[{ 'no-online': !wechat.IsOnline }]"
            :src="wechat.Avatar"
            alt
          />
          <p
            :class="[{ 'no-online': !wechat.IsOnline }]"
            v-text="wechat.WeChatNick"
          ></p>
          <span v-if="wechat.IsOnline" class="iconfont jubo-on-line"></span>
          <span v-else class="iconfont jubo-off-line"></span>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="WeChatLoginNotice(wechatsWantToLogin)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-aside>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      navs: {
        friendCircle: [
          {
            navName: '发朋友圈',
            navIcon: 'el-icon-thumb',
            navPath: 'circleSend'
          },
          {
            navName: '我的朋友圈',
            navIcon: 'el-icon-help',
            navPath: 'circleMy'
          },
          {
            navName: '朋友圈日志',
            navIcon: 'el-icon-info',
            navPath: 'circleLog'
          }
        ],
        groupAssistant: [
          {
            navName: '群发助手',
            navIcon: 'el-icon-s-promotion',
            navPath: 'groupSend'
          },
          {
            navName: '群发记录',
            navIcon: 'el-icon-info',
            navPath: 'groupLog'
          }
        ],
        tools: [
          {
            navName: '新的朋友',
            navIcon: 'el-icon-message-solid',
            navPath: 'newFriend'
          },
          {
            navName: '添加好友',
            navIcon: 'el-icon-s-custom',
            navPath: 'addFriend'
          },
          {
            navName: '批量加好友',
            navIcon: 'el-icon-s-check',
            navPath: 'addFriendAuto'
          },
          {
            navName: '号码查微信',
            navIcon: 'el-icon-mobile-phone',
            navPath: 'searchNumber'
          },
          {
            navName: '加好友结果查询',
            navIcon: 'el-icon-search',
            navPath: 'searchPhones'
          },
          {
            navName: '自动功能',
            navIcon: 'el-icon-time',
            navPath: 'autoTask'
          },
          {
            navName: '自动回复',
            navIcon: 'el-icon-position',
            navPath: 'autoReply'
          },
          {
            navName: '自动打招呼',
            navIcon: 'el-icon-s-comment',
            navPath: 'autoHi'
          },
          {
            navName: '批量打标签',
            navIcon: 'el-icon-collection-tag',
            navPath: 'takeLabels'
          },
          {
            navName: '清理僵尸粉',
            navIcon: 'el-icon-delete-solid',
            navPath: 'clearFans'
          },
          {
            navName: '导出二维码',
            navIcon: 'el-icon-picture',
            navPath: 'qrCode'
          },
          {
            navName: '手机管理',
            navIcon: 'el-icon-s-tools',
            navPath: 'phoneManagement'
          },
          {
            navName: '好友筛选',
            navIcon: 'el-icon-search',
            navPath: 'friendsFilter'
          },

          //   {
          //     navName: '更多功能',
          //     navIcon: 'el-icon-share',
          //     navPath: 'moreTools'
          //   },
        ]
      }, // 其他页面的nav
      dialogFormVisible: false, // 是否显示选择微信登陆的dialog
      wechatsWantToLogin: [], // 想要登陆的微信
    }
  },
  computed: {
    ...mapGetters({
      currentNavs: 'currentNavs', // 其他页面的选中的navs
      ghMap: 'conversation/ghMap', // 会话页面 公众号
      wechats: 'conversation/wechats', // 会话页面 当前用户绑定的微信
      wechatsLogin: 'conversation/wechatsLogin', // 会话页面 已经登陆的微信
      currentWechat: 'conversation/currentWechat', // 会话页面 选中的微信
      currentWeChatId: 'conversation/currentWeChatId', // 会话页面 选中的微信的id
      newMessageNotice: 'nedb/newMessageNotice', // 会话页面 新消息
      friendsAll: 'nedb/friendsAll', // 会话页面 新消息
      chatRoomsAll: 'nedb/chatRoomsAll' // 会话页面 新消息
    }),
    // 重新排列微信 登陆的放在top
    reorganizedWechats() {
      let reWechats = []
      //   for (let index = 0; index < 10; index++) {
      for (const wechat of this.wechats) {
        if (wechat.IsOnline && wechat.IsLogined) {
          reWechats.push(wechat)
        }
      }
      for (const wechat of this.wechats) {
        if (!wechat.IsOnline || !wechat.IsLogined) {
          reWechats.push(wechat)
        }
      }
      //   }
      return reWechats
    }
  },
  methods: {
    // 设置当前的nav
    setNav(nav) {
      this.$store.commit('SET_CURRENT_NAV', nav)
    },
    // 设置会话页面的微信
    choseWechat(wechat) {
      if (!wechat.IsOnline) {
        this.$message.error('手机微信不在线，请检查手机！')
        return
      } else if (!wechat.IsLogined) {
        this.$message.warning('微信未登陆，请先登陆！')
        return
      }
      let wechatId = wechat.WeChatId
      if (wechatId === this.currentWechat.WeChatId) return
      // 设置会话页面选择的微信
      this.$store.commit('conversation/SET_CURRENT_WECHAT', wechat)
      // 设置当前会话列表
      this.$store.dispatch('nedb/SetConversations', wechatId)
      // 设置当前通讯录
      this.$store.dispatch('nedb/SetFriends', wechatId)
      // 设置当前微信聊天列表
      this.$store.dispatch('nedb/SetChatRooms', wechatId)
      // 设置labels
      this.$store.dispatch('nedb/SetLabels', wechatId)
      // 设置members 这里会有明显的延迟
      this.$store.dispatch('nedb/SetMembers', wechatId)
      // 获取公众号
      if (!this.ghMap[wechatId]) {
        this.$store.dispatch('websocket/TriggerBizContactPushTask')
      }
      // 以下是权宜之计
      setTimeout(() => {
        if (this.chatRoomsAll.length === 0) {
          // 拉取好友列表
          this.$store.dispatch('websocket/TriggerFriendPushTask')
        }
        if (this.chatRoomsAll.length === 0) {
          // 拉取群聊列表
          // this.$store.dispatch('nedb/RemoveAllRoomByWechatId', this.currentWechat.WeChatId)
          // this.$store.dispatch('nedb/RemoveAllRoomByWechatId', this.currentWechat.WeChatId)
          this.$store.dispatch('websocket/TriggerChatroomPushTask', wechatId)
        }
      }, 500);

    },
    // 显示微信对话框
    showDialog() {
      // 获取最新的微信列表
      this.$store.dispatch('websocket/GetWeChatsReq')
      // 默认选中可以在线的微信
      setTimeout(() => {
        for (const wechat of this.wechats) {
          if (wechat.IsOnline) {
            this.wechatsWantToLogin.push(wechat.WeChatId)
          }
        }
      }, 500);
      this.dialogFormVisible = true
    },
    // 选择微信登陆
    choseWechatLogin(wechat) {
      if (wechat.IsOnline) {
        let wid = this.wechatsWantToLogin.indexOf(wechat.WeChatId)
        if (wid === -1) {
          this.wechatsWantToLogin.push(wechat.WeChatId)
        } else {
          this.wechatsWantToLogin.splice(wid, 1)
        }
      } else {
        this.$message({
          message: '该微信未上线,不能登陆!',
          type: 'warning'
        });
      }
    },
    // 提交登陆
    WeChatLoginNotice(wechatsWantToLogin) {
      let wechatsInfo = []
      // 要登陆的微信
      for (const wechat of this.wechats) {
        if (wechatsWantToLogin.indexOf(wechat.WeChatId) >= 0) {
          wechatsInfo.push({
            WeChatId: wechat.WeChatId,
            IsLogin: true
          })
        } else {
          wechatsInfo.push({
            WeChatId: wechat.WeChatId,
            IsLogin: false
          })
        }
      }
      this.$store.dispatch('websocket/WeChatLoginNotice', wechatsInfo)
      this.dialogFormVisible = false
    }
  },
  mounted() {
    // 显示选择微信登陆的弹框
    if (this.$store.state.route.path === '/') {
      this.dialogFormVisible = true
    }
    // 默认选中可以在线的微信
    setTimeout(() => {
      for (const wechat of this.wechats) {
        if (wechat.IsOnline) {
          this.wechatsWantToLogin.push(wechat.WeChatId)
        }
      }
    }, 500);
    // 计算未读消息数
    this.$store.dispatch('nedb/SetNewMessageNotice')
  }
}
</script>

<style lang="scss" scoped>
.item {
  color: $font-color-2;
  cursor: pointer;
  &:hover {
    background-color: rgba($color: #000000, $alpha: 0.1);
  }
}
.item-chose {
  background: #edf3ff;
  color: #e6a23c;
  &:hover {
    background: #edf3ff;
  }
}

.aside-page {
  margin: 2px 2px 0 2px;
  margin-left: 0;
  background-color: $bg-color-content-base;
  overflow: hidden;

  .aside-navs {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    .aside-nav {
      @extend .item;
      padding: 12px 10px;
      .fa-lg {
        margin-right: 5px;
      }
    }
    .nav-chose {
      @extend .item-chose;
    }
  }

  .aside-wechats {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;

    .aside-wechats-title,
    .aside-wechats-bottom {
      color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 40px;
      min-height: 40px;
      border-bottom: solid 1px white;
      width: 100%;
      background-color: $bg-color-nav-title-2;
      .fa-weixin {
        color: #4bfb9a;
      }
    }
    .aside-wechats-bottom {
      border-bottom: none;
      border-top: solid 1px white;
    }

    .wechats-list {
      width: 100%;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow-y: scroll;
      .wechat-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;

        @extend .item;
        .avatar-messages {
          position: relative;
          padding: 5px 5px 0 5px;
          .wechat-avatar {
            width: 42px;
            height: 42px;
            border-radius: 5px;
          }
          .new-message-notice {
            color: #fff;
            position: absolute;
            top: 0px;
            right: 0px;
            height: 20px;
            min-width: 20px;
            padding: 0 5px;
            line-height: 20px;
            text-align: center;
            background: red;
            border-radius: 10px;
          }
          .jubo-off-line {
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .wechat-nick {
          height: 24px;
          line-height: 24px;
          width: 132px;
          text-align: center;
        }
      }
      .wechat-chose {
        @extend .item-chose;
      }
      .item-disabled {
        cursor: not-allowed;
        .wechat-avatar {
          filter: grayscale(1);
        }
        .jubo-off-line {
          color: red;
        }
      }
    }
  }

  .my-dialog {
    .chose-wechat-login-form {
      display: flex;
      overflow-x: hidden;
      overflow-y: auto;
      flex-wrap: wrap;
      height: 300px;

      .wechat-info {
        width: 115px;
        height: 115px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-direction: column;
        margin: 1px;
        cursor: pointer;
        img {
          width: 80px;
          height: 80px;
        }
        p {
          height: 20px;
          line-height: 20px;
        }
        .jubo-off-line {
          position: absolute;
          top: 5px;
          right: 5px;
          color: red;
        }
        .jubo-on-line {
          position: absolute;
          top: 5px;
          right: 5px;
          color: green;
        }
        .no-online {
          filter: grayscale(100%);
        }
      }
      .login {
        &::before {
          content: "已登陆";
          background: inherit;
          z-index: 5;
          width: 100%;
          height: 100%;
          color: green;
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
        }
      }
      .selected {
        &::after {
          content: "✅";
          background: rgba($color: #000000, $alpha: 0.5);
          z-index: 10;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: space-around;
    }
  }
}
// @media only screen and (max-width: 1200px) {
//   .aside-page {
//     width: 150px !important;
//     .wechat-nick-hide {
//       display: none;
//     }
//     .new-message-notice {
//       margin-left: 10px;
//     }
//   }
// }
</style>
